<template>
  <el-dialog v-model="dialogFormVisible" title='删除产品' width="30%" center>
    <span>请慎重操作，删除后将失去此产品的记录</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="productDelete">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue'
import { bus } from "../../../utils/mitt.js"
import { DeleteProductAPI } from '../../../api/product.js'
import { ElMessage } from 'element-plus'
import { tracking } from '../../../utils/operate'

const productId = ref()
const productName = ref()

const props = defineProps<{
  getProductList: Function,
}>()

bus.on('deleteId', (row: any) => {
  productId.value = row.id
  productName.value = row.product_name
})


const emit = defineEmits(['success'])

const productDelete = async () => {
  const res = await DeleteProductAPI(productId.value)
  if (res.data.status == 0) {
    ElMessage({
      message: '删除产品成功',
      type: 'success',
    })
    props.getProductList()
    dialogFormVisible.value = false
    tracking("产品管理", "删除", { name: productName.value }, "高级")
  } else {
    ElMessage.error('删除产品失败')
    dialogFormVisible.value = false
  }
}

// 弹窗开关
const dialogFormVisible = ref(false)

// 打开编辑管理员的弹窗
const open = () => {
  dialogFormVisible.value = true
}

defineExpose({
  open
})

onBeforeUnmount(() => {
  bus.all.clear()
})
</script>

<style lang="scss" scoped></style>